<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="__STATIC__/mobile/css/common.css" />
    <link rel="stylesheet" href="__STATIC__/mobile/css/contact.css" />
    <link rel="stylesheet" href="__STATIC__/mobile/css/picker.css" />
    <link rel="stylesheet" href="__STATIC__/mobile/css/layer.css" />
    <title>课程咨询</title>
</head>

<body>
    <div class="consult contact">
        <div class="consult_type">
            <div class="about_title">
                <h6>课程咨询联系方式</h6>
                <img src="__STATIC__/mobile/img/icon-red-dotted.png" alt="" />
            </div>
            <!--联系方式-->
            <div class="contact_type">
                <ul>
                    {php}$list = json_decode(setting('list'),true);{/php}
                    {foreach $list as $l}
                    <li>
                        <img src="{$l.thumb ?: ''}" alt="" />
                        <span>{$l.name ?: ''}:</span>
                        <p>{$l.value ?: ''}</p>
                    </li>
                    {/foreach}

                </ul>
                <div class="contact_btn">
                    <a href="tel:{:setting('kefu_tel')}">
                        <button>立即咨询</button>
                    </a>
                </div>
            </div>
        </div>
        <!--在线留言-->
        <div class="leave_msg">
            <div class="about_title">
                <h6>在线留言</h6>
                <img src="__STATIC__/mobile/img/icon-red-dotted.png" alt="" />
            </div>
            <form action="">
                <ul class="leave_list">
                    <li>
                        <p>您的姓名</p>
                        <input type="text" placeholder="" id="userName" name="name"/>
                    </li>
                    <li>
                        <p>性别</p>
                        <label id="sexy">
                            <input type="text" placeholder="" name="sex"  value="男" onclick="$(this).blur()" readonly/>
                            <img src="__STATIC__/mobile/img/icon_down_arrow.png" alt="" />
                        </label>
                    </li>
                    <li>
                        <p>课程类型</p>
                        <label id="select">
                            <input type="text" placeholder="" name="type" value="学校集体课程" onclick="$(this).blur()" readonly/>
                            <img src="__STATIC__/mobile/img/icon_down_arrow.png" alt="" />
                        </label>
                    </li>
                    <li>
                        <p>联系方式</p>
                        <input type="number" name="link" placeholder="" id="phone" />
                    </li>
                    <li>
                        <p>年龄段</p>
                        <input type="text" name="age" placeholder="" id="age" />
                    </li>
                    <li>
                        <p>所在学校</p>
                        <input type="text" name="school" placeholder="" id="school" />
                    </li>
                    <li>
                        <p>留言</p>
                        <textarea name="content" id=""></textarea>
                    </li>
                </ul>
                <div class="contact_btn" id="confirm">
                    <a href="javascript:;">
                        <button type="button">提交</button>
                    </a>
                </div>
            </form>
        </div>
    </div>

    <script src="__STATIC__/mobile/js/rem.js"></script>
    <script src="__STATIC__/mobile/js/jquery-3.3.1.min.js"></script>
    <script src="__STATIC__/mobile/js/picker.min.js"></script>
    <script src="__STATIC__/mobile/js/layer.js"></script>
    <script>
        var data1 = [{
            text: '学校集体课程',
            value: 1
        }, {
            text: '个人课程',
            value: 2
        }, {
            text: '小班课程',
            value: 3
        }, {
            text: '大班课程',
            value: 4
        }];
        var identifyEl = document.getElementById('select');
        var identify = new Picker({
            data: [data1]
        });
        identify.on('picker.select', function(selectedVal, selectedIndex) {
            console.log(selectedIndex);
            $('#select').children('input').val(data1[selectedIndex[0]].text)
        });
        identifyEl.addEventListener('click', function() {
            identify.show()
        });


        //性别
        var data2 = [{
            text: '男',
            value: 1
        }, {
            text: '女',
            value: 2
        }];
        var identifyE2 = document.getElementById('sexy');
        var identify2 = new Picker({
            data: [data2]
        });
        identify2.on('picker.select', function(selectedVal, selectedIndex) {
            console.log(selectedIndex);
            $('#sexy').children('input').val(data2[selectedIndex[0]].text)
        });
        identifyE2.addEventListener('click', function() {
            identify2.show()
        });
        //提交
        $('#confirm').on('click', function() {
            var name = $('[name="name"]').val();
            var sex = $('[name="sex"]').val();
            var type = $('[name="type"]').val();
            var link = $('[name="link"]').val();
            var age = $('[name="age"]').val();
            var school = $('[name="school"]').val();
            var content = $('[name="content"]').val();

            if ($('#userName').val() == '') {
                layer.open({
                    content: "请输入您的姓名",
                    skin: "msg",
                    time: 2,
                })
                return false
            }
            if ($('#sexy').children('input').val() == '') {
                layer.open({
                    content: "请选择您的性别",
                    skin: "msg",
                    time: 2,
                })
                return false
            }
            if ($('#select').children('input').val() == '') {
                layer.open({
                    content: "请选择课程类型",
                    skin: "msg",
                    time: 2,
                })
                return false
            }
            if ($('#phone').val() == '') {
                layer.open({
                    content: "请输入您的联系方式",
                    skin: "msg",
                    time: 2,
                })
                return false
            }
            if ($('#age').val() == '') {
                layer.open({
                    content: "请输入年龄段",
                    skin: "msg",
                    time: 2,
                })
                return false
            }
            if ($('#school').val() == '') {
                layer.open({
                    content: "请输入所在学校",
                    skin: "msg",
                    time: 2,
                })
                return false
            }
            $.ajax({
                url:'{:url("/m/apply3")}',
                type:'post',
                data:{name:name,sex:sex,type:type,link:link,age:age,school:school,content:content,lesson_id:"{$lesson_id ?: ''}"},
                success:function (res) {
                    if(res.code==1){
                        layer.open({
                            content: "提交成功",
                            skin: "msg",
                            time: 2,
                            end:function () {
                                location.reload();
                            }
                        })
                    }else if(res.code=='busy'){
                        layer.open({
                            content: "您操作太频繁啦，稍后再来吧！",
                            skin: "msg",
                            time: 2,
                        })
                    }else {
                        layer.open({
                            content: "请输入正确信息",
                            skin: "msg",
                            time: 2,
                        })
                    }
                }
            })

        })
    </script>
</body>

</html>